define(['knockout','util'], function (ko,Util) {
    function ViewModel(params) {
        Util.extend(this, params);
        var scope = this;
        scope.css = {'xgx-custom-form-field':!ko.root.mobile};
        scope.field.__enable = !scope.record.isViewField(scope.field.name);
        scope.field.__attr = {};//define a new obj for attr edit(the field._attr is pass as reference)
        $.extend(scope.field.__attr,scope.field._attr);
        scope.field.__attr.placeholder = '请选择 {0} . . .'.formatTpl(scope.field.alias);
        delete scope.field.__attr.type;//delete the un support html type
        scope.field.__inputType = scope.field.inputType?scope.field.inputType:'text';
        scope.field.__inputCss = {'d-none':ko.root.mobile};
        scope.field.__showCollapse = ko.observable(false);

        if(scope.field.type == 'tree' || scope.field.type =='checkboxes') {
            if(!ko.root.mobile){
                scope.field.__attr['data-toggle'] = 'collapse';
                scope.field.__collapseId = '{0}_{1}_collapse'.formatTpl(scope.field.type,scope.field.name);
                scope.field.__collapseCss = {'collapse':true};
                scope.field.__attr['data-target'] =  '#{0}'.formatTpl(scope.field.__collapseId);
            }

            scope.field.__showCollapse(true);
        }

        if(scope.field.type == 'checkboxes'){
            scope.field._options = ko.observableArray();
            if(scope.field.options) scope.field._options(scope.field.options);
            if(!scope.field.option) scope.field.option = {};

            scope.field.option._css = {};
            scope.field.option._css['col-{0}'.formatTpl(scope.field.option.col?scope.field.option.col:12)] = true;

            if(!scope.field.option.displayField) scope.field.option.displayField = 'text';
            if(!scope.field.option.valueField) scope.field.option.valueField = 'value';
        }

        scope.field.__displayValue = ko.observable();
        scope._onFieldClick = function () {
          if(scope.onFieldClick) scope.onFieldClick();
          return true;
        };
        scope._mouseleave = function (vm,evt) {
            evt.currentTarget.classList.remove('show')
        }
    }

    return ViewModel;
});
